<template>
	<view class="wrapper alert">
		<div class="main mt20">
			<div class="bfff hr ">
				<div class="center middle-box ">
					<div class="f32 c333">电缆名称</div>
					<div class="flex1 tRight f32 c999 nowrap">{{data.cableName}}</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333 ">电缆编号</div>
					<div class="flex1 tRight f32 c999">{{data.code}}</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333">图号</div>
					<div class="flex1 tRight f32 c999">{{data.state}}</div>
				</div>
				<div class="center middle-box noBorder">
					<div class="f32 c333">电缆状态</div>
					<div class="flex1 tRight f32 c999">{{data.state}}</div>
				</div>
			</div>
			<div class="bfff hr ">
				<div class="center middle-box ">
					<div class="f32 c333">负责人</div>
					<div class="flex1 tRight f32 c999">{{data.userName}}</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333 ">使用部门</div>
					<div class="flex1 tRight f32 c999">{{data.departmentName}}</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333">复验周期</div>
					<div class="flex1 tRight f32 c999">{{data.recheckCycleName}}</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333">寿命周期</div>
					<div class="flex1 tRight f32 c999">{{data.lifeSpanName}}</div>
				</div>
				<div class="center middle-box noBorder">
					<div class="f32 c333">下次检验日期</div>
					<div class="flex1 tRight f32 c999">2023/07/12</div>
				</div>
			</div>
			<div class="f28 c999 text-2">电连接器量(4)</div>
			<div class="bfff hr ">
				<div class="center middle-box ">
					<div class="f32 c333">电连接器1剩余插拔次数</div>
					<div class="flex1 tRight f32 c999">490/500</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333 ">电连接器2剩余插拔次数</div>
					<div class="flex1 tRight f32 c999">490/500</div>
				</div>
				<div class="center middle-box ">
					<div class="f32 c333">电连接器3剩余插拔次数</div>
					<div class="flex1 tRight f32 c999">0</div>
				</div>
				<div class="center middle-box noBorder">
					<div class="f32 c333">电连接器4剩余插拔次数</div>
					<div class="flex1 tRight f32 c999">0</div>
				</div>
			</div>
			<div class="center mt40">
				<div class="f28 cfff text-3 center">请验入库</div>
				<div class="f28 cfff text-3 center">出库领用</div>
				<div class="f28 cfff text-3 center">复验</div>
				<div class="f28 cfff text-3 center">报废</div>
				<div class="f28 cfff text-3 center">封存</div>
				<div class="f28 cfff text-3 center">遗失</div>
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				id: '',
				data: {}
			}
		},
		onLoad(e) {
			this.id = e.id
			this.findCableDetailsByIdOrCode()
		},
		methods: {
			// 获取电缆详细
			findCableDetailsByIdOrCode() {
				this.loading = true
				this.$http('/api/findCableDetailsByIdOrCode', {
					id: this.id
				}, 'GET').then(
					r => {
						this.loading = false
						this.data = r.data
					}).catch(e => {
					this.loading = false
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 50rpx;
	}

	.text-3 {
		width: 104rpx;
		height: 100rpx;
		border-radius: 16rpx;
		background: #408CFF;
		padding: 10rpx 23rpx;
	}

	.text-3:not(:nth-of-type(6)) {
		margin-right: 12rpx;
	}

	.text-2 {
		padding: 0 32rpx 20rpx;
	}

	.noborder {
		border-bottom: 0;
	}

	.middle-box {
		border-bottom: 1rpx solid #eee;
		padding: 34rpx 0;
	}

	.hr {
		padding: 0 32rpx;
		margin-bottom: 25rpx;
	}
</style>